<template>
  <div style="background-color: #f9f9f9; height: 100vh">
    <div>
      <van-nav-bar
        title="发话题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <img src="../../img/img.png" alt="" style="height: 300px; width: 390px" />
    </div>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div style="margin-top: 20px; margin-bottom: 5px">
      <van-cell-group inset style="--van-cell-group-inset-padding: 0">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="记录一下你的美丽心情吧!"
          show-word-limit
          input-class="textarea"
        />
      </van-cell-group>
    </div>
    <div
      style="
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 15px;
      "
    >
      同步到:
      <img src="../../img/friend.png" alt="" style="margin: 0 15px" /><img
        src="../../img/weibo.png"
        alt=""
      />
    </div>
    <div style="position: absolute; bottom: 30px; left: 25%">
      <button
        style="
          border: 0;
          background-color: #ff9999;
          width: 180px;
          height: 60px;
          color: white;
          border-radius: 20px;
        "
        @click="talk"
      >
        发布
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { article } from "../../api/modules/article";
import axios from "axios";
export default {
  setup() {
    const onClickLeft = () => history.back();
    const value1 = ref(0);
    const value2 = ref("a");
    const option1 = [
      { text: "贴纸", value: 0 },
      { text: "新款商品", value: 1 },
      { text: "活动商品", value: 2 },
    ];
    const option2 = [
      { text: "滤镜", value: "a" },
      { text: "好评排序", value: "b" },
      { text: "销量排序", value: "c" },
    ];
    const talk = () => {
      article({ content: message.value, topicId:1, id:8 }).then((res) => { console.log(res); })
      
    };
    const message = ref();
    return {
      onClickLeft,
      value1,
      value2,
      option1,
      option2,
      message,
      talk,
    };
  },
};
</script>

<style lang="scss">
.textarea {
  height: 200px;
}
</style>
